<template>
	<view>
		
		<!-- {{text}} -->
			<view v-for="(item,index) in text" :key="index" @click="change(item)">
				<view class="flex frame">
				<span>{{item.txt}}</span>
				<image  v-if="item.show" src = "../../static/方向下.png" mode=""></image>
				<image  v-else src = "../../static/direction.png" mode=""></image>
				</view>
			<view class="showItem">
				<p v-if="item.show" class="showItem-p">{{item.text}}</p>
			</view>
		</view>
			
			<view class="footer">
				<a href="#">联系人工客服</a>
				<p>在线时间：工作日9:00-12:00 13:00-18:00</p>
			</view>
	</view>
</template>

<script>
	import helpData from '../../common/help/help.js';// 朋友圈数据
	export default {
		data() {
			return {
				text: helpData,
				no: true
			}
		},
		methods: {
			change(item) {
				this.$set(item, "show", item.show ? false : true)
			}
		}
	}
</script>


<style>
	body {
		background-color: #ffffff;
	}
	.flex {
		display: flex;
		justify-content: space-between; 
		align-items: center;
	}
	.frame {
		margin: 30rpx 30rpx 0; 
		background-color: #ebeff3; 
		height: 90rpx;
	}
	.frame span {
		font-weight: bold; 
		padding: 20rpx; 
		color: #35363a; 
		font-size: 30rpx;
	}
	.frame image {
		padding: 20rpx;
		height:30rpx; 
		width: 30rpx;
	}
	.showItem {
		margin: 0 30rpx;
		background-color: #f9f9f9; 
		letter-spacing:2rpx;
	}

	.showItem-p {
		padding: 20rpx; 
		font-size: 29rpx;
	}
 
	.footer{
		width:100%;
		position: absolute; 
		/* top:700rpx; */
/* 		border-top: 1rpx solid #f8f8f8; */
		padding-top:300rpx; 
		text-align: center;
	}
	.footer a {
		color: #007AFF; 
		font-size: 36rpx; 
		font-weight: bold; 
		text-align:center; 
		padding-top: 10rpx;
		padding-bottom:50rpx;
	}
	.footer p {
		text-align:center; 
		margin: 10rpx;
		padding-top: 10rpx;
		padding-bottom:24rpx;
	}
</style>